<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
	<head>
		<link rel="stylesheet" href="static/index.css" >
		<link rel="stylesheet" href="static/list.css" >
		<link rel="stylesheet" href="static/jquery.mCustomScrollbar.min.css" >
		<link rel="stylesheet" href="static/dialog.css" >
		<meta charset="utf-8"/>
		<script src="static/jquery.min.3.3.1.js"></script>
		<script type="text/javascript" src="ckeditor.js"></script>
		<script type="text/javascript" src="translations/zh-cn.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<script src="static/datalist.js"></script>

		<script src="static/dialog.js"></script>
		<script src="static/ReadPasswordDialog.js"></script>
		<script src="static/DeleteConfirm.js"></script>
		<script src="static/info_menu.js"></script>
		<script src="static/util.js"></script>
		<script src="static/Flexible.js"></script>
		<script src="static/menu.js"></script>
		<script src="static/init.js"></script>
		<script src="static/jquery.mCustomScrollbar.concat.min.js"></script>

		<script src="static/jcrop/js/jquery.Jcrop.min.js"></script>

		<link rel="stylesheet" href="static/jcrop/css/jquery.Jcrop.min.css" type="text/css" />
	</head>

	<body >
		<div class="root" id="body" v-on:click="hideMenu" style="position:relative;width:100%;height:100%;">
			<div class="head">
				<div class="left_head">
					<span>我的笔记本</span>
				</div>

				<div class="right_head">
					<div class="own-info">
						<img src="static/1496898148113.jpg" class="own-info-img">
					</div>
					<div class="info-more" title="更多" v-on:click.stop="showInfoMore($event)">
						<i class="arrow-line"></i>
						<info-menu ref="infoMenu"></info-menu>
					</div>
				</div>
			</div>
			<div class="main">
				<div class="menu" id="menu">
					<ul style="display:none;" id="creatorMenu" class="creator_menu">
						<li v-for="li in lis" v-bind:value="li.value">{{li.text}}</li>
					</ul>
					<div class="sider_bar" type="sider" id="menu_sider_bar"></div>
					<navigator-menu></navigator-menu>
				</div>
				<div class="list" id="list">
					<div class="sider_bar" id="list_sider_bar"></div>
					<div class="toolbar">
						<a class="returnIcon disable" title="返回上一级" id="returnIcon" href="javascript:void(0)"></a>
						<div class="searchPane">
							<a href="javascript:void(0)" class="searchIcon">&nbsp;</a>
							<input type="text" class="searchInput" placeholder="搜索">
							<a href="javascript:void(0)" class="delIcon">&nbsp;</a>
						</div>
						<div class="list-setting">
							<a href="javascript:void(0)" class="icon-setting list-setting" id="listSetting" v-on:click.stop="showListMenu($event)"></a>
							<ul class="list-setting-ul" style="display:none;">
								<li v-for="listSettingItem in listSettingItems" v-bind:value="listSettingItem.value" v-on:click.stop="listTypeChange($event)">
									<span>{{listSettingItem.text}}</span>
									<i v-if="listSettingItem.value === 1" class="list-item mode_selected"></i>
									<i v-else class="list-item"></i>
								</li>
							</ul>
						</div>
					</div>
						<div style="position:absolute;top:61px;bottom:0px;left:0px;right:0px;">
							<div id="list_container">
									<data-list ref="my_data_list"></data-list>
							</div>
						</div>
					<list_menu ref="list_menu"></list_menu>
				</div>
				<div class="noteeditor" id="noteeditor">
					<!-- The toolbar will be rendered in this container. -->
					<div style="height:60px;line-height:60px;">
						<div style="position:absolute;left:0px;top:13px;display:inline-block;">
							<input type="text">
						</div>
						<div style="position:absolute;right:0px;display:inline-block;text-align:center;">
							<div style="position:relative;right:0px;display:inline-block;">
								<a href="javascript:void(0)">保存</a>
							</div>
							<div style="position:relative;right:0px;display:inline-block;">
								<div class="toolbar_item" title="分享">
									<i class="share_icon">&nbsp;</i>
								</div>
								<div class="toolbar_item" title="分享">
									<i class="share_icon">&nbsp;</i>
								</div>
								<div class="toolbar_item" title="分享">
									<i class="share_icon">&nbsp;</i>
								</div>
							</div>
						</div>
					</div>
					<div id="toolbar-container">

					</div>

					<!-- This container will become the editable. -->
					<div id="editor">
						<p>This is the initial editor content.</p>
					</div>
				</div>
				<move_dialog ref="move_dialog"></move_dialog>
				<info-dialog ref="info_dialog"></info-dialog>
				<read-pwd-dialog ref="read_pwd_dialog"></read-pwd-dialog>

				<delete-confirm-dialog ref="delete_confirm_dialog"></delete-confirm-dialog>
				<upload-icon-dialog ref="upload_icon_dialog" v-bind:nomesh="true"></upload-icon-dialog>
			</div>
		</div>

		<script>
		var creator = new Vue({
			el:"#body",
			components:{
				"data-list":data_list,
				"list_menu":list_menu,
				"navigator-menu":menu,
				"move_dialog":MoveToDialog,
				"info-dialog":InfoDialog,
				"read-pwd-dialog":ReadPasswordDialog,
				"delete-confirm-dialog":DeleteConfirmDialog,
				"upload-icon-dialog":UploadImageDialog,
				"info-menu":InfoMenu
			},
			data:{"lis":[
				{text:"新建笔记",value:"1"},
				{"text":"新建文件夹",value:"2"}
			],
			"listSettingItems":[
				{text:"摘要",value:0},
				{text:"列表",value:1}
			]
			},
			methods:{
				"showMenu":function(event){
					let ele = document.getElementById("creatorMenu");
					ele.style="display:block;";
					if(!this.menus){
						this.menus = new Object();
					}
					this.hideMenu("creatorMenu");
					this.menus["creatorMenu"] = ele;
					var currEle = $(event.currentTarget);
					var location = currEle.position();

					$(ele).css({"top":location.top+currEle.height()+parseFloat(currEle.css("border-top-width"))+parseFloat(currEle.css("border-bottom-width")),"left":location.left+currEle.width()/2});
				},
				"hideMenu":function(menuName){
					//document.getElementById("creatorMenu").style="display:none;";
					if(this.menus){
						for(var prop in this.menus){
							if(menuName ){
								if(prop != menuName)
								this.menus[prop].style = "display:none;";
							}else{
									this.menus[prop].style = "display:none;";
							}
						}
					}
				},
				"showListMenu":function(event){
					let ele = event.target;
					ele.nextElementSibling.style="display:block";
					if(!this.menus){
						this.menus = new Object();

					}
					this.hideMenu("listMenu");
					this.menus["listMenu"] = ele.nextElementSibling;

				},
				"listTypeChange":function(event){
					var currEle = event.currentTarget;
					var jqEle = $(currEle);
					//修改组件的数据
					if(jqEle.attr("value") > 0){
						this.$refs.my_data_list.$set(this.$refs.my_data_list._data,"isList",true);
						$("#listSetting").attr("class","icon-setting list-setting");
					}else{
						this.$refs.my_data_list.$set(this.$refs.my_data_list._data,"isList",false);
						$("#listSetting").attr("class","icon-setting abstract-setting");
					}

					jqEle.children().addClass("mode_selected");
					$.each(jqEle.siblings(),function(i,value){
						$(value).children().removeClass("mode_selected")
					});
					this.hideMenu();

				},
				"showInfoMore":function(event){
						$(this.$refs.infoMenu.$el).show();
						if(!this.menus){
							this.menus = new Object();
						}
						this.hideMenu("infoMenu");
						this.menus["infoMenu"] = this.$refs.infoMenu.$el;
				}
			}
		});

		//屏蔽鼠标右键弹出浏览器菜单
		 $("#list")[0].oncontextmenu = function (event) {
				event.preventDefault();
		 };

		 var menu = $("#menu");
		 var list = $("#list");
		 function min_width_cb(){
			 var expand_layout_menu = $("#expand-layout");
			 var collapse_menu = $("#collapse_menu");
			 if(expand_layout_menu.css("display") !== "none"){
				 expand_layout_menu.hide();
				 collapse_menu.show();
			 }
		 }

		 function middle_width_cb(){
			 var expand_layout_menu = $("#expand-layout");
			 var collapse_menu = $("#collapse_menu");
			 if(expand_layout_menu.css("display") === "none"){
				 expand_layout_menu.show();
				 collapse_menu.hide();
			 }
		 }

		 function flexibleCallback(el){
			 el.trigger("width-change",{"width":el.width()});
		 }
		 window.vm = creator;
		 var noteeditor = $("#noteeditor");
		 var associate = {innerEl:{el:list,innerEl:{el:noteeditor,callback:flexibleCallback}}};
		 var associate1 = {innerEl:{el:noteeditor,callback:flexibleCallback}};
		 new Flexible({el:menu,associate:associate,sider_bar:$("#menu_sider_bar"),min_width:80,max_width:326,min_width_callback:min_width_cb,middle_width_callback:middle_width_cb});
		 new Flexible({el:list,sider_bar:$("#list_sider_bar"),min_width:200,max_width:600,associate:associate1});
		</script>
	</body>

</html>
